<%@ page pageEncoding="UTF-8"%>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%
	String path = request.getContextPath();
	String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort()
			+ path + "/";
%>
<!DOCTYPE html>
<html>
<head>
<base href="<%=basePath%>">
<link type="text/css" rel="stylesheet"
	href="themes/bootstrap/easyui.css">
<link type="text/css" rel="stylesheet" href="themes/icon.css">
<!-- 新 Bootstrap 核心 CSS 文件 -->
<link rel="stylesheet" href="bootstrap/css/bootstrap.min.css">

<!-- 可选的Bootstrap主题文件（一般不用引入） -->
<link rel="stylesheet" href="bootstrap/css/bootstrap-theme.min.css">

<!-- jQuery文件。务必在bootstrap.min.js 之前引入 -->
<script src="bootstrap/js/jquery.min.js"></script>

<!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
<script src="bootstrap/js/bootstrap.min.js"></script>
<!-- 为了确保适当的绘制和触屏缩放-->
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link rel="stylesheet" type="text/css" href="css/common.css">
<title>员工管理</title>
</head>
<script type="text/javascript">
     $(function(){
    	 //全选
    	$("#checkAll").click(function(){
    		if (this.checked) {
    			$("input[name=userId]").prop("checked",true);
			}else {
				$("input[name=userId]").prop("checked",false);
			}
    	}) ;
    	
    	//删除
    	$("#deleteEmp").click(function(){
    		var userIds = document.getElementsByName("userId");
    		var checkedUserIds=[];
    		var ids;
    		for (var i = userIds.length; i-->0;) {
    			if(userIds[i].checked){
    				checkedUserIds.push(userIds[i].value);
				}
			}
    		 if(checkedUserIds.length===0){
					alert("请至少选择一条记录");	
					return;
				}
		     if(confirm("确认删除?")){
					$("#deleteEmp").submit();
				}
    		window.location='deleteEmployee.do?ids=' + checkedUserIds;
    	});

        $("a[name=updateEmp]").click(function(){
        	//var id = $(".checkOne").value();
        	var phone = $(this).parent().prev();
        	var birth = $(this).parent().prev().prev();
        	var age = $(this).parent().prev().prev().prev();
        	var sex = $(this).parent().prev().prev().prev().prev();
        	var name = $(this).parent().prev().prev().prev().prev().prev();
        	var account = $(this).parent().prev().prev().prev().prev().prev().prev();
        	window.location = "ShowUpdateEmpController.do?account="+account.text()+"&name="+name.text()+"&sex="+sex.text()+"&age="+age.text()+"&birth="+birth.text()+"&phone="+phone.text();
        	//var id = $(this).parent().prev().prev().prev().prev().prev().prev().prev().prev().value;
        	//window.location = "updateEmployee.do?id="+id;
     });
     });      
</script>
<body>
     <div class="container" >
         <div class="header">
			<ol class="breadcrumb">
				<li><a  href="welcome.jsp">首页</a></li>
				<li><a  href="selectEmps.do">员工管理 </a></li>
				<li>员工信息</li>
			</ol>
	     </div>
         <!-- 查询员工 -->


	     <div class="row" style="margin-top: 20px;margin-left: 20px">
		     <a class="btn btn-success" href="pages/addEmp.jsp" >新增员工</a>
		     <button type="button" class="btn btn-danger" id="deleteEmp">删除员工</button>
	     </div>
     
	  <div class="row" style="margin-top: 20px">
	       <div class="col-md-12">
				<h3>员工信息</h3>
				<table  class="table table-striped" id="table" >
				    <tr class="active">
				         
				         <th><input type="checkbox" id="checkAll" onclick="handleCascadeCheck(this)">
						 <td>编号</td>
						 <td>账号</td>
						 <td>姓名</td>
						 <td>性别</td>
						 <td>年龄</td>
						 <td>出生日期</td>
						 <td>电话</td>

						 <td><a name="updateEmp"></a></td>
				    </tr> 
				    <div id="showEmployees">
					<c:forEach var="employees" items="${showEmployees}" varStatus="vs">
						<tr>
							 <td><input type="checkbox" class="checkOne" name="userId" value="${employees.id}"></td>
						     <td>${vs.count}</td>
							 <td>${employees.account}</td>
							 <td>${employees.name}</td>
							 <td>${employees.sex}</td>
							 <td>${employees.age}</td>
							 <td>${employees.birth}</td>
							 <td>${employees.phone}</td>
							 <td><a name="updateEmp">查看/修改</a></td>
						 </tr>
					 </c:forEach>
					 </div>
			    </table>
				<div>
				  <ul class="pagination">
					   ${pageList}
		  		  </ul>
		  	</div>
		</div>
	  </div>
  </div>	
          
</body>
</html>